<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
	<form id="skuForm">
		<div class="form-group row">
			<label class="col-sm-4 col-form-label">SPU名称</label>
			<div class="col-sm-6">
				<input type="hidden" name="spuId" value="${spu.id }">
				${spu.goodsName }
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-4 col-form-label">品牌</label>
			<div class="col-sm-6">
				${spu.brand }
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-4 col-form-label">分类</label>
			<div class="col-sm-6">
				${spu.category }
			</div>
		</div>
		<div class="form-group row">
        <label class="col-sm-4 col-form-label">SKU名称</label>
        <div class="col-sm-6">
            <input type="text" 	name="title" value="">
        </div>
    </div>
    <div class="form-group row">
        <label  class="col-sm-4 col-form-label">价格</label>
        <div class="col-sm-6">
            <input type="text"  name="price" value="">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-4 col-form-label">库存</label>
        <div class="col-sm-6">
            <input type="text"  
                   name="stockCount" value="">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-4 col-form-label">大图片</label>
        <div class="col-sm-4">
            <input type="file"  id="uploadFile" name="file" >
        </div>
    </div>
	
 	<div class="form-group row">
        <label class="col-sm-4 col-form-label">明细</label>
        <div class="col-sm-4">
        	<table class="table" id="table">
        		<tr>
        			<td>规格</td>
        			<td>选项</td>
        			<td><button type="button" class="btn btn-primary" onclick="addRow()">&emsp;+&emsp;</button></td>
        		</tr>
        		<tr>
        			<td> 
			        	<select name="specs[0].specId" onchange="getOptions(this,0)">
			        		<option value="">请选择</option>
			            	<c:forEach items="${specs }" var="item">
			           			<option value="${item.id }">${item.specName }</option> 
			           		</c:forEach>
			            </select>
			        </td>
        			<td>
        				<select name="specs[0].id" id="specs_id_0">
        					<option value="">请选择</option>
        					
        				</select>
        			</td>
        			<td>
        				<button type="button" class="btn btn-danger" onclick="delRow(this)">&emsp;-&emsp;</button>
        			</td>
        		</tr>
        	</table>
        
           
        </div>
    </div>
    <div class="form-group row">
        <button type="button" class="btn btn-danger" onclick="save()">保存</button>
    </div>
	</form>

</div>
<script type="text/javascript">
	var index = 1;
	function addRow() {
		$("#table").append(
			'<tr>                                                                                '
    		+'	<td>                                                                             '
		    +'    	<select name="specs['+index+'].specId" onchange="getOptions(this,'+index+')">                                              '
		    +'    		<option value="">请选择</option>                                          '
		    +'        	<c:forEach items="${specs }" var="item">                                 '
		    +'       			<option value="${item.id }">${item.specName }</option>           '
		    +'       		</c:forEach>                                                         '
		    +'        </select>                                                                  '
		    +'    </td>                                                                          '
    		+'	<td>                                                                             '
    		+'		<select name="specs['+index+'].id" id="specs_id_'+index+'">                                                  '
    		+'			<option value="">请选择</option>                                           '
    		+'		</select>                                                                    '
    		+'	</td>                                                                            '
    		+'	<td>                                                                             '
    		+'		<button type="button" class="btn btn-danger" onclick="delRow(this)">&emsp;-&emsp;</button>          '
    		+'	</td>                                                                            '
    		+'</tr>	                                                                             '
		
		);
	}
	
	function delRow(document) {
		$(document).parent().parent().remove();
	}
	
	function getOptions(document,num) {
		$.get('./spec/getOptionsBySpecId?specId='+$(document).val(),function(data){
			$("#specs_id_"+num).empty();
			$("#specs_id_"+num).append('<option value="">请选择</option>') ;
			
			for (var i=0;i<data.length;i++){
				$("#specs_id_"+num).append(
					'<option value="'+data[i].id+'">'+data[i].optionName+'</option>'
				)
			}
		})
	}
	
	function save(){
		let data = new FormData($("#skuForm")[0])
		$.ajax({
			url:'/sku/saveSku',
			type:'post',
			contentType:false,
			processData:false,
			data:data,
			success:function(data){
			 	if(data==true){
                    alert('添加成功')
                    //跳转到列表页面
                    $("#content").load("./spu/list?currPage=1")
                }else{
                    alert('添加失败')
                }
			}
		})
	}
</script>
</body>
</html>